<template>
  <el-dialog
    title="新增计划"
    :visible.sync="dialogVisible"
    width="960px"
    @close="reset"
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="118px" label-suffix="：">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="系统设置" name="first">
          <el-form-item label="启动时间" prop="starttime">
            <el-date-picker
              v-model="formData.starttime"
              type="datetime"
              placeholder="选择日期时间"
              align="center"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            />
          </el-form-item>
          <el-form-item label="运行方向">
            <el-radio-group v-model="formData.systemSet.direction" size="mini">
              <el-radio-button :label="1">正向</el-radio-button>
              <el-radio-button :label="2">反向</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="亩灌水量">
            <el-input v-model="formData.systemSet.irrAmount" type="number" placeholder="灌水量" clearable style="width:400px">
              <template slot="append">m³/亩</template>
            </el-input>
          </el-form-item>
          <el-form-item label="边界设定" style="margin-bottom:-12px">
            <el-radio-group v-model="formData.systemSet.edge" size="mini">
              <el-radio-button :label="1">边界停止</el-radio-button>
              <el-radio-button :label="2">边界折返</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="运行规则设置" name="second">
          <div class="tip pb18 mb12 color-danger">
            下方规则均为停机规则，即在触发下方填写条件时喷灌机会停机，填写值的视为有效规则，不填写则无视。
          </div>
          <el-table
            :data="formData.rules"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60"
            />
            <el-table-column
              prop="dname"
              label="监测设备"
              align="center"
            />
            <el-table-column
              prop="name"
              label="属性"
              align="center"
            />
            <el-table-column
              prop="express"
              label="条件"
              align="center"
            />
            <el-table-column
              prop="name"
              label="值"
              align="center"
            >
              <template #default="scope">
                <el-input-number v-model="scope.row.value" size="mini" controls-position="right" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="suggest"
              label="建议临界值"
              align="center"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="分区参数设置" name="third">
          <div class="tip pb18 mb12 color-danger">
            此处分区信息来源于系统给此喷灌机设置的分区信息，直接使用，不可在此编辑分区。各分区内运行规则说明详见喷灌机整体运行规则。
          </div>
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(item,index) in formData.areas" :key="index" :title="`分区${index}`" :name="index">
              <template slot="title">
                <i class="header-icon el-icon-document" /><b style="font-size:15px;margin-left:4px;">分区{{ index }}</b>
              </template>
              <div>
                <el-descriptions :column="2" border label-class-name="labelClass" content-class-name="contentClass">
                  <el-descriptions-item label="灌水量">
                    <el-input v-model="item.irrAmount" placeholder="灌水量" type="number" clearable>
                      <template slot="append">m³/亩</template>
                    </el-input>
                  </el-descriptions-item>
                  <el-descriptions-item label="尾枪设置"><el-switch
                    v-model="item.endgun"
                    :active-value="1"
                    :inactive-value="0"
                  /></el-descriptions-item>
                </el-descriptions>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
      <div class="h12" />
      <el-button type="primary" icon="el-icon-document" @click="submit">提交</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: {
    areas: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeNames: [0],
      dialogVisible: false,
      activeName: 'first',
      rules: {
        starttime: [
          { required: true, message: '请选择启动时间', trigger: 'blur' }
        ]
      },
      formData: {
        serialno: '',
        starttime: '',
        systemSet: {
          direction: 1,
          edge: 2,
          irrAmount: ''
        },
        areas: [],
        rules: [
          {
            serialno: '',
            dname: '喷灌机',
            namekey: 'pressure',
            name: '压力',
            express: '大于',
            value: '',
            suggest: '1.2MPa'
          }, {
            serialno: '',
            dname: '气象站',
            namekey: 'windSpeed',
            name: '风速',
            express: '大于',
            value: '',
            suggest: '6m/s'
          }, {
            serialno: '',
            dname: '气象站',
            namekey: 'temperature',
            name: '温度',
            express: '小于',
            value: '',
            suggest: '0°C'
          }, {
            serialno: '',
            dname: '气象站',
            namekey: 'rainfall',
            name: '雨量',
            express: '大于',
            value: '',
            suggest: '1mm'
          }
        ]
      }
    }
  },
  watch: {
    areas: {
      handler(newVal) {
        this.formData.areas = newVal.map((val) => {
          return {
            startAngle: val.startAngle,
            endAngle: val.endAngle,
            irrAmount: '',
            endgun: 0
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    show(row) {
      if (row && row.id) {
        this.formData = {
          id: row.id,
          serialno: row.serialno,
          starttime: row.starttime,
          systemSet: row.content.systemSet,
          rules: row.content.rules,
          areas: row.content.areas
        }
      }
      this.formData.serialno = row.serialno
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
      this.reset()
    },
    reset() {
      this.formData = {
        serialno: '',
        starttime: '',
        systemSet: {
          direction: 1,
          edge: 2,
          irrAmount: ''
        },
        areas: [],
        rules: [
          {
            serialno: '',
            dname: '喷灌机',
            namekey: 'pressure',
            name: '压力',
            express: '大于',
            value: '',
            suggest: '1.2MPa'
          }, {
            serialno: '',
            dname: '气象站',
            namekey: 'windSpeed',
            name: '风速',
            express: '大于',
            value: '',
            suggest: '6m/s'
          }, {
            serialno: '',
            dname: '气象站',
            namekey: 'temperature',
            name: '温度',
            express: '小于',
            value: '',
            suggest: '0°C'
          }, {
            serialno: '',
            dname: '气象站',
            namekey: 'rainfall',
            name: '雨量',
            express: '大于',
            value: '',
            suggest: '1mm'
          }
        ]
      }
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const { serialno, starttime, systemSet, rules, areas } = this.formData
          const formData = {
            serialno,
            starttime,
            content: {
              systemSet,
              rules,
              areas
            }
          }
          if (this.formData.id) {
            formData.id = this.formData.id
          }
          this.$emit('submit', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addRow() {
      this.formData.rules.push({ serialno: '', namekey: '', operator: '', val: '' })
    },
    deleteRow(index) {
      this.formData.rules.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
